<%= include ic/header.html %>
<style>
#main{text-align:center;padding:30px 0;}
#content{text-align:left;width:100%;width:1024px;margin:auto;padding:10px;}
#content .title{padding:10px 20px;}

#itemInfo{padding:0;}
#itemCover{width:484px;height:484px;border:1px solid #fff;padding:0;float:left;overflow:hidden;margin:15px 0 15px 20px;}
#itemInfo .am-fr{width:320px;padding:0;}
#itemInfo .am-fr h1{font-size:3rem;margin-bottom:0;}
#itemInfo .am-fr h2{font-size:2rem;margin-top:0;}
#itemInfo #price{font-size:3rem;}
#sizeBar{padding:10px 0;}
#sizeBar span{border:1px solid #ccc;margin:5px 5px 0 0;padding:5px;cursor:pointer;}
#sizeBar span.c{border-color:#273584;color:#fff;background:#273584;}
#sizeBar span.d{border-color:#ddd;color:#ddd;}
#numBar{padding:10px 0;overflow:hidden;}
#numBar div{float:left;margin-right:10px;}
#numBar i{margin-top:2px;border:1px #111 solid;padding:0 10px;cursor:pointer;}
#numBar input{width:5rem;text-align:center;}

#btnAddCart{background:#273584;color:#fff;border:1px #273584 solid;}
#btnAddFav{border:1px #111 solid;margin-right:20px;}

#detail{margin:0px;}
#detail.am-tabs-default .am-tabs-nav>.am-active a{background-color:#111;}

#imglist{width:140px;float:left;}
#imglist .d{filter:alpha(opacity=30);-moz-opacity:0.3;-khtml-opacity: 0.3;
  opacity: 0.3;}
#imglist .btn{width:140px;height:30px;background:url("/i/btnTop.png") no-repeat center center;cursor:pointer;}
#imglist #btnBottom{background-image:url("/i/btnBottom.png");}
#imglist ul{width:142px;height:440px;overflow:hidden;padding:0px;margin:7px 0;}
#imglist ul li{width:140px;height:140px;margin:0 0 8px;border:1px solid #fff;
  cursor:pointer;overflow:hidden;}
#imglist ul li.c{border:1px solid #ccc;}
#imglist ul li:last-child{margin:0;}
#imglist img{}

.subTitle{width:100%;margin:40px 0 20px;color:#2D2D85;font-weight:600;
  font-size:1.8rem;}

#brandbox .logo{width:180px;height:180px;}
#brandbox .logo img{width:180px;height:auto;}
#brandbox .info{width:780px;}
#brandbox .info h2{color:#aaa;font-size:3rem;background:url(/i/titlebg.png) no-repeat left bottom;padding-bottom:25px;margin-bottom:10px;}
#brandbox .info p{padding:0;margin:0;}
#brandbox .info .text{color:#aaa;font-size:1.5rem;}

#itemList li{padding:20px 10px 0;text-align:center;font-family:"宋体";}
#itemList li .img{width:80%;margin:0 10% 0;overflow:hidden;position:relative;}
#itemList li .img .b{position:absolute;top:0;left:0;visibility:hidden;}
#itemList li a{color:#1D1D1B}
#itemList li a:hover{text-decoration:underline;}
</style>
<div class="am-cf" id="main">
  <div id="content">
    <div id="itemInfo" class="am-g">
      <div id="imglist">
        <div id="btnTop" class="btn d" onclick="listScroll(-147)"></div>
        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-1" data-am-gallery="{}">
          <% for(var i=0;i<result.get('images').length;i++){ %>
          <li class="d" onclick="setCover(this)">
            <div class="am-gallery-item">
              <img data-id="<%= result.get('images')[i] %>" src="/p?id=<%= result.get('images')[i] %>&w=140&h=140"
             data-rel="/p?id=<%= result.get('images')[i] %>" class="am-img-responsive" />
            </div>
          </li>
          <% } %>
        </ul>
        <div id="btnBottom" class="btn d" onclick="listScroll(147)"></div>
      </div>
      <div id="itemCover" class="am-fl am-u-sm-12 am-u-md-6 am-nbfc jqzoom">
        <img src="<% if(result.get('cover')){ %>/p?id=<%= result.get('cover') %>&w=483&h=483<% }else{ %>/i/default.png<% } %>" jqimg="<% if(result.get('cover')){ %>/p?id=<%= result.get('cover') %><% }else{ %>/i/default.png<% } %>" onload="fixImg()" />
      </div>
      <div if="itemData" class="am-fr">
        <h1><%= result.get('Brand').get('name') %></h1>
        <h2><%= result.get('title') %></h2>
        <div id="price">￥<%= result.get('price').toFixed(2) %></div>
        <hr/>
        尺寸：
        <div id="sizeBar">
          <% for(var i=0;i<result.get('size').length;i++){ %>
          <span class="size" data-stock="<%= result.get('stock')[i]%>" onclick="setSize(this)"><%= result.get('size')[i]%></span>
          <% } %>
        </div>
        <hr/>
        数量：
        <div id="numBar">
          <div><i class="am-icon-minus" onclick="minus()"></i></div>
          <div><input id="item-num" type="tel" value=1 min=1 max=<%= result.get('num') %> /></div>
          <div><i class="am-icon-plus" onclick="plus()"></i></div>
          <div>（库存：<font id="item-stock"><%= result.get('num') %></font>）</div>
        </div>
        <hr/>
        <div id="ctrBar">
          <div id="btnAddFav" class="am-btn" onclick="addCollections()">添加心愿单</div>
          <div id="btnAddCart" class="am-btn" onclick="addCart()">加入购物袋</div>
        </div>
      </div>
    </div>
    <div class="am-cf"></div>
    <div class="subTitle am-cf">品牌背景&nbsp;&nbsp;/&nbsp;&nbsp;BRAND BACKGROUND</div>
    <div class="am-cf"></div>
    <div id="brandbox" class="am-cf">
      <div class="logo am-fl">
        <img src="/p?id=<%= brand.get('logo') %>" />
      </div>
      <div class="info am-fr">
        <h2><%- brand.get('name') %></h2>
        <div class="text"><%- brand.get('detail') %></div>
      </div>
    </div>
    <div class="am-cf"></div>
    <% if(brand.get('aboutSize')){ %>
    <div class="subTitle am-cf">尺码信息&nbsp;&nbsp;/&nbsp;&nbsp;SIZE INFO</div>
    <div class="am-cf"></div>
    <div id="sizeinfo" class="am-cf">
      <%- brand.get('aboutSize') %>
    </div>
    <div class="am-cf"></div>
    <% } %>
    <% if(result.get('detail')){ %>
    <div class="subTitle am-cf">布料与洗涤&nbsp;&nbsp;/&nbsp;&nbsp;MATERILAS & WASH</div>
    <div class="am-cf"></div>
    <div id="detail" class="am-cf">
      <%- result.get('detail') %>
    </div>
    <div class="am-cf"></div>
    <% } %>
    <div class="subTitle am-cf mlike">你可能喜欢&nbsp;&nbsp;/&nbsp;&nbsp;YOU MIGHT LIKE</div>
    <div class="am-cf mlike"></div>
    <div id="mlike" class="am-cf mlike">
      <ul id="itemList" class="am-avg-sm-4 am-cf"></ul>
    </div>
    <div class="am-cf mlike"></div>
  </div>
</div>
<%= include ic/footer.html %>
<script src="/js/jquery.jqzoom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/css/jqzoom.css" type="text/css">
<script type="text/javascript">
var $loading = $("#my-modal-loading");
var page=1;
$(function() {
  setCover($("#imglist li:first"));
  $("#sizeBar span").map(function(){
    var stock=parseInt($(this).data("stock"));
    //console.log(stock);
    if(isNaN(stock) || stock==0){
      $(this).addClass("d");
    }
  });
  listScroll(0);
  $("#sizeBar span:not(.d):first").addClass("c");
  if($("#sizeBar span.c").size()>0){
    $("#item-num").attr("max",$("#sizeBar span.c").data("stock"));
    $("#item-stock").text($("#sizeBar span.c").data("stock"));
  }else{
    $("#numBar").text("已售罄");
  }
  getItem();
  $(window).resize(function(){
    fixImg();
  });
  $(".jqzoom").jqueryzoom({
    xzoom: 300,		//zooming div default width(default width value is 200)
		yzoom: 300,		//zooming div default width(default height value is 200)
		offset: 40,		//zooming div default offset(default offset value is 10)
		position: "right",
    preload: 1    , // preload of images :1 by default
		lens:1  // lens over the image   1 by default
	});
});

function fixImg(){
  var w =$("#itemCover").width();
  var iw=$("#itemCover img").width();
  var ih=$("#itemCover img").height();
  $("#itemCover").height(w);
  if(iw/ih>1){
    $("#itemCover img").width(w);
    $("#itemCover img").height(w*ih/iw);
    $("#itemCover img").css("margin-top",(w-$("#itemCover img").height())/2+"px");
  }else{
    $("#itemCover img").height(w);
    $("#itemCover img").width(w*iw/ih);
    $("#itemCover img").css("margin-left",(w-$("#itemCover img").width())/2+"px");
  }
}

function plus(){
  var max=$("#numBar input").attr("max");
  var num=parseInt($("#numBar input").val());
  if(num<max){
    num++;
    $("#numBar input").val(num);
    //$("#numBar font").text(max-num);
  }
}

function minus(){
  var num=parseInt($("#numBar input").val());
  if(num>1){
    num--
    $("#numBar input").val(num);
    //$("#numBar font").text(max-num);
  }
}

function setSize(obj){
  if(!$(obj).hasClass("d")){
    $("#sizeBar .c").removeClass("c");
    $(obj).addClass("c");
    $("#item-num").attr("max",$("#sizeBar span.c").data("stock"));
    $("#item-stock").text($("#sizeBar span.c").data("stock"));
  }
}

function setCover(obj){
  if($(obj).hasClass("d")){
    $("#imglist .c").addClass("d");
    $("#imglist .c").removeClass("c");
    $(obj).removeClass("d");
    $(obj).addClass("c");
    var src=$(obj).find("img").data("rel");
    //console.log(src);
    $("#itemCover img").attr("src",src+"&w=483&h=483");
    $("#itemCover img").attr("jqimg",src);
  }
}

function listScroll(y){
  var top = $("#imglist ul").scrollTop();
  $("#imglist ul").animate({scrollTop:top+y},100,function(){
    var sh=$("#imglist ul")[0].scrollHeight-$("#imglist ul").height();
    top = $("#imglist ul").scrollTop();
    //console.log("sh:"+sh+"  top:"+top);
    if(sh>top){
      $("#btnBottom").removeClass("d");
    }else{
      $("#btnBottom").addClass("d");
    }
    if(top>0){
      $("#btnTop").removeClass("d");
    }else if(top==0 || sh<=0){
      $("#btnTop").addClass("d");
    }
  });
}

function addCollections(){
  $loading.modal('open');
  $.post("/addcollections", {
    "ajax"		: true,
    id        : "<%= result.id %>"
  },function(data){
    $loading.modal('close');
    if(typeof(data)=="object" && data.user){
      mAlert({
        title:"提示",
        text:"已成功将本产品添加至心愿单！",
        onConfirm:function(e) {}
      });
    }else if(!data.error && !data.user){
      //console.dir(data);
      mAlert({
        title:"错误",
        text:"请先登录！",
        onConfirm:function(e) {
          gotoUrl("/login?refer="+encodeURI('/itemdetail?id=<%= result.id %>'));
        }
      });
    }else{
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

function addCart(){
  var num   = $("#numBar input").val();
  if(num && num>0){
    var size  = $("#sizeBar .c").text();
    $loading.modal('open');
    $.post("/addcart", {
      "ajax"		: true,
      id        : "<%= result.id %>",
      num       : num,
      size      : size
    },function(data){
      $loading.modal('close');
      console.log(data);
      if(typeof(data)=="object" && data.user){
        $("#cartcount").text(data.count);
        mAlert({
          title:"提示",
          text:"已成功将本产品添加至购物袋！",
          onConfirm:function(e) {}
        });
      }else if(!data.error && !data.user){
        //console.dir(data);
        mAlert({
          title:"提示",
          text:"请先登录！",
          onConfirm:function(e) {
            gotoUrl("/login?refer="+encodeURI('/itemdetail?id=<%= result.id %>'));
          }
        });
      }else{
        mAlert({
          title:"错误",
          text:data.error,
          onConfirm:function(e) {}
        });
      }
    }, "json");
  }else{
    mAlert({
      title:"提示",
      text:"请先选择购买的数量",
      onConfirm:function(e) {}
    });
  }
}

function fixImg2(){
  $("#itemList>li .img").height($("#itemList li .img").first().width());
  $("#itemList>li .img").map(function(){
    var w=$(this).innerWidth();
    if($(this).children("a").children("img").width() / $(this).children("a").children("img").height()>1){
      $(this).children("a").children("img").height(w);
      $(this).children("a").children("img").css("width","auto");
    }else{
      $(this).children("a").children("img").width(w);
      $(this).children("a").children("img").css("height","auto");
    }
  });
}

function getItem(){
  $.get("/getitems", {
    "ajax"		: true,
    size      : "<%= result.get('size').join(',') %>",
    brand     : "<%= brand.get('name').id %>",
    sex       : "<%= result.get('sex').join(',') %>",
    pagesize  : 4
  },function(data){
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      $(".mlike").show();
      $("#itemList").html("");
      var items = data.items;
      for(var i=0;i<items.length;i++){
        var html='<li><div class="img">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +'<img src="/p?id='+items[i].cover
            +'&w=400&h=400" onload="fixImg2()" >';
        if(items[i].bcover){
          html+='<img class="b" src="/p?id='+items[i].bcover
              +'&w=400&h=400" onload="fixImg2()" >';
        }
        html+='</a></div><div class="text">'
            +'<a href="/itemdetail?id='+items[i].id+'">'
            +items[i].Brand+'<br/>'+items[i].title
            +'<br/>￥'+items[i].price+'</a></div></li>';
        $("#itemList").append(html);
      }
      //console.dir(data.pager);
      $("#itemList li").hover(function(){
        //console.log($(this).find('.b'));
        $(this).find('.b').css("visibility","visible");
      },function(){
        $(this).find('.b').css("visibility","hidden");
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}
</script>
